<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>滚动下滑</title>
    <link rel="stylesheet" type="text/css" href="../css/reset.css" />
    <style>
      /* body {
      width: 100%;
      height: 100%;
      background-color: black;
      opacity: 0.8;
    } */

      section {
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-image: url(../img/visualScrolling/1.1.png);
        background-size: cover;
        position: relative;
      }

      section h1 {
        color: #fff;
        position: absolute;
        top: 45%;
        left: 45%;
      }

      .section2 {
        background-image: url(../img/visualScrolling/2.1.png);
      }

      .section1 {
        background-image: url(../img/visualScrolling/3.1.png);
      }
    </style>
  </head>

  <body>
    <section>
      <h1>1</h1>
    </section>
    <section class="section1">
      <h1>2</h1>
    </section>
    <section class="section2">
      <h1>3</h1>
    </section>
    <section class="section1">
      <h1>1</h1>
    </section>
    <section class="section2">
      <h1>2</h1>
    </section>
    <section>
      <h1>3</h1>
    </section>
  </body>
  <!-- <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js"></script>
  <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollTrigger.min.js"></script> -->
  <script src="../lib/jasp.js"></script>
  <script src="../lib/ScrollTringger.js"></script>
  <script>
    /* 设计思路 动画过程-50% 50% */

    // console.log(gsap);
    // console.log(ScrollTrigger);
    const sections = document.querySelectorAll("section");
    gsap.registerPlugin(ScrollTrigger);
    sections.forEach((section) => {
      gsap.fromTo(
        section,
        {
          backgroundPositionY: `-${window.innerHeight / 2}px`,
        },
        {
          // backgroundPositionY: `${window.innerHeight / 2}px`,
          backgroundPositionY: `${0}px`,
          duration: 1.5,
          ease: "none",
          scrollTrigger: {
            trigger: section,
            srcub: true,
          },
        }
      );
    });
  </script>
</html>
